<template>
	<view class="abc">
		<view style="background-color: red; width: 100%; height: 50px;" >
		</view>
	<view class="content">
		<view class="text-area">
			<rich-text class="title" :nodes="sum">结果:    0</rich-text>
		</view>
		<view class="flex">
			<view class="flex1">
				<image class="logo" :src="arr[nums[0]]"></image> 
			</view>
		<view class="flex2">
			<image class="logo" :src="arr[nums[1]]"></image>
			<image class="logo" :src="arr[nums[2]]"></image>
		</view>
			<!-- <image src="../../static/point/1-point.png" mode=""></image> -->
		</view>
		<view class="btn"><button  class="btn1" @click="start">start</button></view>
	</view>
	</view>
</template>
 
<script>
export default {
	data() {
		return {
			timer: null,
			sum: "",
			nums: [0, 0, 0],
			arr: ['../../static/point/1-point.png', '../../static/point/2-point.png', '../../static/point/3-point.png', '../../static/point/4-point.png', '../../static/point/5-point.png', '../../static/point/6-point.png']
		};
	},
	onLoad() {
		this.picFn();
		let num = 0;
		this.nums.forEach(item => {num += item});
		// this.sum = `分数：${num+3}`;
	},
	methods: {
		start() {
			clearInterval(this.timer);
			// this.sum = "摇骰子中";
			this.timer = setInterval(this.picFn, 50);
			setTimeout(() => {
				clearInterval(this.timer);
				let num = 0;
				this.nums.forEach(item => {num += item});
				this.sum = `结果：${num+3}`;
			}, 1000);
		},
		randNum:() => Math.floor(Math.random() * 6),
		picFn(){ this.nums = this.nums.map(item => this.randNum())},
		
	}
};
</script>
 
<style>
.content {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
}
.flex {
	width: 100%;
	height: 400px;
	display: flex;
	flex-direction: column;
	/* justify-content: space-between; */
	/* flex-wrap: wrap; */
}
.flex1{
	padding-left: 100px;
	box-sizing: border-box;
}
.flex2{
	/* padding-left: 50px; */
	display: flex;
	justify-content: space-around;
}
.logo {
	height: 200rpx;
	width: 200rpx;
	margin-top: 50rpx;
	margin-left: 100rpx;
	margin-right: auto;
	margin-bottom: 50rpx;
}
 
.text-area {
	/* display: flex;
	justify-content: center; */
}
 
.title {
	font-size: 32rpx;
	color: black;
}
.btn{
	width: 100%;
	height: 50px;
	/* background-color: #007aff; */
}
.btn1{
	width: 100%;
	height: 50px;
	background-color:#e64340;
	color: white;
}
</style>